<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three 线</title>
    <script src="js/three.js"></script>
    <style>
        #container{
            border:none;
            cursor: pointer;
            width:90%;
            height:500px;
            margin:0 auto;
            background: #ccc;
        }
    </style>
</head>
<body onload="ThreeStart()">
    <div id="container"></div>
</body>
<script>
    //渲染器
    var renderer;
    function initThree(){
        width=document.getElementById('container').clientWidth; //容器的宽
        height=document.getElementById('container').clientHeight;//容器的高
        renderer=new THREE.WebGLRenderer({ //生成渲染器对象
            antialias:true   //抗锯齿设置为true
        });
        renderer.setSize(width,height);//指定渲染器的宽高
        document.getElementById('container').appendChild(renderer.domElement);//追加canvas元素到canvas3d中
        renderer.setClearColor(0xFFFFFF,1.0);//设置canvas背景色
    }
    //摄像机
    var camera;
    function initCamera(){
        camera=new THREE.PerspectiveCamera(45,width/height,1,5000);//设置透视投影的相机，默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov  纵横比：aspect  相机离视体积最近的距离：near  相机离视体积最远的距离：far）
        camera.position.x=0;//设置相机的位置坐标
        camera.position.y=50;//设置相机的位置坐标
        camera.position.z=100;//设置相机的位置坐标
        camera.up.x=0;//设置相机的上为【x】轴方向
        camera.up.y=1;//设置相机的上为【y】轴方向
        camera.up.z=0;//设置相机的上为【z】轴方向
        camera.lookAt({x:0,y:0,z:0});//设置视野的中心坐标
    }
    //设置场景
    var scene;
    function initScene(){
        scene=new THREE.Scene();
    }
    //设置光源
    var light;
    function initLight(){
        light=new THREE.DirectionalLight(0xff0000,1.0,0);//设置平行光源
        light.position.set(200,200,200);//设置光源向量
        scene.add(light);//追加光源到场景
    }

    //设置物体

    //球
//    var sphere;
//    function initObject(){
//        sphere=new THREE.Mesh(
//                new THREE.SphereGeometry(20,20), //width、height、depth
//                new THREE.MeshLambertMaterial({color:0xff0000})// 材质设定
//        );
//        scene.add(sphere);
//        sphere.position.set(0,0,0);
//    }

    //线
    var cube;
    function initLine(){
        var geometry=new THREE.Geometry();
        var material=new THREE.LineBasicMaterial({
            vertexColors:true
        });
        var color1=new THREE.Color(0x444444),color2=new THREE.Color(0xFF0000);

        //线的材质可以由两点的颜色决定
        var p1=new THREE.Vector3(-100,0,100);
        var p2=new THREE.Vector3(100,0,-100);
        geometry.vertices.push(p1); //geometry.vertices是一个数组
        geometry.vertices.push(p2);
        geometry.colors.push(color1,color2);
        var line=new THREE.Line(geometry,material,THREE.LinePieces);
        scene.add(line); //把线添加到场景中
    }
    function ThreeStart(){
        initThree();
        initCamera();
        initScene();
        initLight();
//      initObject();
        initLine();
        renderer.clear();
        renderer.render(scene,camera);
    }
</script>
</html>